<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title data-i18n="onboarding_title"></title>
    <style>
        body.building > * {
            display: none !important;
        }
    </style>
</head>

<body class="building">

<section class="slide" data-name="intro">
    <p class="large" data-i18n="onboarding_headline"></p>

    <a href="#" class="nextSlide" data-i18n="onboarding_setup"></a><br />
    <a href="#" class="skip" data-i18n="onboarding_skip"></a>
</section>

<section class="slide" data-name="position">
    <p class="large" data-i18n="onboarding_sidebar_position_desc"></p>

    <div>
        <a href="#" data-value="left" data-i18n="settings_sidebar_position_left"></a>
        <a href="#" data-value="right" data-i18n="settings_sidebar_position_right"></a>
    </div>
</section>

<section class="slide" data-name="surface">
    <p class="large" data-i18n="onboarding_sidebar_surface_desc"></p>

    <div>
        <a href="#" data-value="light" data-i18n="onboarding_sidebar_surface_light"></a>
        <a href="#" data-value="dark" data-i18n="onboarding_sidebar_surface_dark"></a>
        <p class="wrap">
            <a href="#" data-value="auto"><span data-i18n="settings_surface_auto"></span></a>
        </p>
    </div>

    <a class="info"></a>
    <p class="desc" data-i18n="settings_surface_info"></p>
</section>

<section class="slide" data-name="openAction">
    <p class="large" data-i18n="onboarding_sidebar_open_action_desc"></p>

    <div>
        <a href="#" data-value="mousedown" data-i18n="settings_open_action_leftclick"></a>
        <a href="#" data-value="contextmenu" data-i18n="settings_open_action_rightclick"></a>
        <a href="#" data-value="mousemove" data-i18n="settings_open_action_mouseover"></a>
        <a href="#" data-value="icon" data-i18n="settings_open_action_icon"></a>
    </div>

    <a class="info"></a>
    <p class="desc" data-i18n="settings_open_action_desc"></p>
</section>

<section class="slide" data-name="handson">
    <p class="large" data-i18n="onboarding_handson_desc"></p>
</section>

<section class="slide" data-name="finished">
    <p class="large" data-i18n="onboarding_finish_desc"></p>

    <p class="info">
        <span></span>
        <a href="#" class="toggleArea" data-i18n="settings_toggle_area"></a>
    </p>

    <a href="#" class="settings" data-i18n="onboarding_goto_settings"></a>
    <a href="#" class="appearance" data-i18n="onboarding_goto_appearance"></a>
</section>

<div id="sidebar">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>


<script src="/js/lib/jsu.js"></script>
<script src="/js/opts.js"></script>
<script src='/js/helper/i18n.js'></script>
<script src='/js/helper/font.js'></script>
<script src='/js/helper/stylesheet.js'></script>
<script src='/js/helper/template.js'></script>
<script src='/js/helper/utility.js'></script>
<script src='/js/helper/model.js'></script>

<script src='/js/onboarding.js'></script>
</body>
</html>